<template>
  <div class="top_nav">
    <div class="top_nav_top">
      <div v-for="(item,index) in list" :key="index" @mouseover="loremOver(index)" @mouseout="loremOut">
        {{ item.categoryName }}
      </div>
    </div>
    <div class="top-body">
      <Top_nav_list :twoThreeList="twoThreeList"></Top_nav_list>
    </div>
  </div>

</template>

<script>
import Top_nav_list from '../components/Top-nav-list'
import { getThreeLevelList } from '../config/api'
export default {
  components: {
    Top_nav_list
  },
  data() {
    return {
      // 三级列表
      list: [],
      // 展示对应的二·三级列表
      twoThreeList: []
    }
  },
  methods: {
    // 鼠标移入
    loremOver(i) {
      // console.log(i)
      this.twoThreeList = this.list[i].categoryVOList
    },
    loremOut() {
      // console.log('out')
    }
  },
  mounted() {
    // 请求三级列表
    getThreeLevelList()
      .then(result => {
        if (result.status == 200) {
          // console.log(result.data.data)
          this.list = result.data.data
        }
      })
      .catch(err => {
        if (err.code == 'ERR_BAD_REQUEST') {
          console.log(err)
        }
      })
  }
}
</script>

<style lang="less" scoped>
.top_nav {
  width: 100%;
  height: 100%;
  .top_nav_top {
    display: flex;
    width: fit-content;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
    div {
      cursor: pointer;
      font-size: 14px;
      padding: @login_size_10px - 2;
    }
    div:hover {
      transform: scale(1.3);
      // color: #000;
    }
  }
  .top_nav_top:hover ~ .top-body {
    height: 500px;
  }
  .top-body {
    // 解决文字移出触发的hover效果
    overflow: hidden;
    z-index: 99;
    width: 100%;
    height: 0px;
    transition: 0.3s;
    position: absolute;
    top: 60px;
    left: 0px;
    background: @nav_back;
  }
  .top-body:hover {
    height: 500px;
  }
}
</style>